<template>
    <view class="container">
        <view class="title">充多少送多少~</view>
        <view class="header">
            <view class="balance">
                <view class="balance_title">可用余额（元）</view>
                <view class="amount">{{ showBalance(balance) }}</view>
            </view>
        </view>

        <!-- 充值选项 -->
        <view class="recharge-options">
            <block v-for="(item, index) in options" :key="index">
                <view :class="'option-item ' + (selectedAmount === item.amount ? 'active' : '')" @tap="selectOption(item.amount)">
                    <view class="option-amount">￥{{ item.amount }}</view>
                    <view class="option-desc">再送{{ item.amount }}元</view>
                </view>
            </block>
            <!-- 自定义金额部分 -->
            <view class="custom-amount">
                <input type="number" placeholder="自定义金额" :value="customAmount" @input="inputCustomAmount" :class="customAmount ? 'active' : ''" @blur="blurCustomAmount" @focus="handleFocus" />
            </view>
        </view>

        <button class="recharge-btn" @tap="handleRecharge">
            <text style="padding-right: 20rpx">{{ selectedAmount ? '￥' + selectedAmount : '' }}</text>
            立即充值
        </button> 

        <!-- 变动明细 -->
        <view class="record-list">
            <view class="section-title">变动明细</view>
            <block v-for="(item, index) in records" :key="index">
                <view class="record-item">
                    <view class="record-type">{{ item.remark }}</view>
                    <view :class="'record-amount ' + (item.amount > 0 ? 'positive' : 'negative')">{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</view>
                    <view class="record-time">{{ item.createTime }}</view>
                </view>
            </block>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const balance = ref(0)
const customAmount = ref(null)
const selectedAmount = ref(null)
const records = ref([
    {
        type: '充值',
        amount: 12,
        time: '2025-01-12 12:19:20'
    },
    {
        type: '充值',
        amount: 12,
        time: '2025-01-12 12:19:20'
    },
    {
        type: '充值',
        amount: 12,
        time: '2025-01-12 12:19:20'
    },
    {
        type: '充值',
        amount: 12,
        time: '2025-01-12 12:19:20'
    }
])

const options = [
    { amount: 20 },
    { amount: 30 },
    { amount: 50 },
    { amount: 100 },
    { amount: 200 }
]

// 方法
const selectOption = (amount) => {
    selectedAmount.value = Number(amount)
    customAmount.value = null // 清空自定义输入
}

const showBalance = (balance) => {
    return balance.toFixed(2)
}

const getBalance = () => {
    const params = {
        userId: uni.getStorageSync('userId')
    }
    // WXCall.WXCall('/wx/app/user/getBalance', params, 'GET', true, (res) => {
    //     if (res.code >= 0) {
    //         console.log(res)
    //         balance.value = res.result
    //     } else {
    //         new Error(res.ReturnInfo)
    //     }
    // })
}

const handleRecharge = () => {
    const params = {
        userId: uni.getStorageSync('userId'),
        amount: selectedAmount.value
    }
    // WXCall.WXCall('/wx/app/recharge', params, 'POST', true, (res) => {
    //     if (res.code >= 0) {
    //         console.log(res)
    //         balance.value = res.result
    //         getBalance()
    //     } else {
    //         new Error(res.ReturnInfo)
    //     }
    // })
}

const getRecordList = () => {
    const params = {
        userId: uni.getStorageSync('userId')
    }
    // WXCall.WXCall('/wx/app/recharge/findRecords', params, 'GET', true, (res) => {
    //     if (res.code >= 0) {
    //         console.log(res)
    //         records.value = res.result
    //     } else {
    //         new Error(res.ReturnInfo)
    //     }
    // })
}

const inputCustomAmount = (e) => {
    selectedAmount.value = e.detail.value
}

const blurCustomAmount = () => {
    selectedAmount.value = customAmount.value
}

const handleFocus = () => {
    customAmount.value = selectedAmount.value
}

// 生命周期钩子
onMounted(() => {
    getBalance()
    getRecordList()
})
</script>

<style lang="scss" scoped>
.container {
    width: 690rpx;
    padding:30rpx;
    background: linear-gradient( 144deg, rgba(132, 154, 219, 0.83) 0%, rgba(91,132,255,0.01) 66%);
}

.header {
    background: #ffffff;
    border-radius: 0 0 16rpx 16rpx ;
    margin-bottom: 20rpx;
    padding: 30rpx;
}

.title {
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 30rpx;
    background: linear-gradient(144deg, rgba(0, 37, 151, 0.83) 0%, rgba(91, 132, 255, 0.01) 66%);
    border-top-right-radius: 16rpx;
    border-top-left-radius: 16rpx;

}

.balance {
    font-size: 28rpx;
    color: #666;
}

/* 新增选中样式 */
.option-item.active {
    border-color: #07c160;
    background-color: #f0fff5;
    position: relative;
}

.option-item.active::after {
    content: '✓';
    color: #07c160;
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    font-size: 32rpx;
}

.custom-amount input.active {
    border-color: #07c160;
}

.balance_title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
}

.amount {
    font-size: 48rpx;
    color: #ff4500;
    display: block;
    margin-top: 15rpx;
    font-family: D-DIN-PRO, D-DIN-PRO;
    font-weight: bold;
    font-size: 48rpx;
    color: #000000;
}

.recharge-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20rpx;
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
}

.option-item {
    width: 192rpx;
    height: 126rpx;
    background: rgba(0,28,113,0.03);
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.option-amount {
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
}

.option-desc {
    font-size: 24rpx;
    color: #666;
    margin-top: 10rpx;
}

.custom-amount input {
    width: 192rpx;
    height: 126rpx;
    border: 2rpx solid #eee;
    border-radius: 16rpx;
    text-align: center;
    font-size: 36rpx;
}

.recharge-btn {
    width: 90%;
    margin: 40rpx auto;
    background: #001c71;
    color: white;
    border-radius: 50rpx;
    font-size: 32rpx;
}

.record-list {
    width: 690rpx;
    margin: 0 auto 0;
    box-sizing: border-box;
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 20rpx;
}

.record-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
}

.record-type {
    font-size: 28rpx;
    color: #333;
}

.record-amount {
    font-size: 32rpx;
    float: right;
}

.positive {
    color: #07c160;
}

.negative {
    color: #ff4500;
}

.record-time {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin-top: 10rpx;
}
</style>
